<template>
  <div class="questions-preview">
    <el-dialog title="题目预览" :visible.sync="dialogVisible" width="50%">
      <!-- content -->
      <div class="dialog-content">
        <el-row>
          <el-col :span="6" v-if="previewData.questionType == 1"
            >【题型】：单选题</el-col
          >
          <el-col :span="6" v-if="previewData.questionType == 2"
            >【题型】：多选题</el-col
          >
          <el-col :span="6" v-if="previewData.questionType == 3"
            >【题型】：多选题</el-col
          >
          <el-col :span="6">【编号】：{{ previewData.id }}</el-col>
          <el-col :span="6" v-if="previewData.difficulty == 1"
            >【难度】：简单</el-col
          >
          <el-col :span="6" v-if="previewData.difficulty == 2"
            >【难度】：一般</el-col
          >
          <el-col :span="6" v-if="previewData.difficulty == 3"
            >【难度】：困难</el-col
          >

          <el-col :span="6">【标签】：{{ previewData.tags }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" v-for="(item, index) in subjectList" :key="index"
            ><span v-if="item.value == previewData.subjectID"
              >【学科】：{{ item.label }}</span
            ></el-col
          >
          <el-col :span="6">【目录】：{{ previewData.directoryName }}</el-col>
          <el-col :span="6">【方向】：{{ previewData.direction }}</el-col>
        </el-row>
        <el-divider></el-divider>
        <el-row>【题干】：</el-row>
        <el-row class="blue" v-html="previewData.question"></el-row>
        <el-row v-if="previewData.questionType == 1"
          >单选题 选项：（以下选中的选项为正确答案</el-row
        >
        <el-row v-else>多选题 选项：（以下选中的选项为正确答案</el-row>
        <el-radio-group v-model="radio" v-if="previewData.questionType == 1">
          <el-radio
            :label="item.isRight"
            v-for="(item, index) in previewData.options"
            :key="index"
            >{{ item.title }}</el-radio
          >
        </el-radio-group>
        <el-checkbox-group v-model="checkList" v-else>
          <el-checkbox
            :label="item.isRight"
            v-for="(item, index) in previewData.options"
            :key="index"
            >{{ item.title }}</el-checkbox
          >
        </el-checkbox-group>
        <el-divider></el-divider>
        <el-row
          >【参考答案】：<el-button type="danger" @click="isPlay = true"
            >视频答案预览</el-button
          ></el-row
        >
        <el-row v-if="isPlay">
          <video
            src="previewData.videoURL"
            controls="controls"
            autoplay
          ></video>
        </el-row>
        <el-divider></el-divider>
        <el-row>【答案解析】：{{ previewData.remarks }}</el-row>
        <el-divider></el-divider>
        <el-row>【题目备注】：{{ previewData.remarks }}</el-row>
      </div>
      <!-- footer -->
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closeDialog">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { simple } from '../../api/hmmm/subjects'
export default {
  name: 'QuestionsPreview',
  props: {
    previewData: {
      type: [Object, String],
      required: true
    }
  },
  data() {
    return {
      dialogVisible: false,
      radio: 1,
      checkList: [1],
      isPlay: false,
      subjectList: []
    }
  },
  created() {
    this.onload()
  },
  methods: {
    showDialog() {
      this.dialogVisible = true
    },
    async onload() {
      try {
        const { data } = await simple()
        this.subjectList = data
      } catch (error) {
        this.$message.error('初始化数据失败！')
      }
    },
    closeDialog() {
      this.dialogVisible = false
      this.isPlay = false
    }
  }
}
</script>
<style lang="less" scoped>
/deep/.el-dialog__footer {
  text-align: right;
}
.el-row {
  margin-bottom: 15px;
}
.el-radio-group {
  display: flex;
  flex-direction: column;
  .el-radio {
    margin-bottom: 10px;
  }
}
.el-checkbox-group {
  display: flex;
  flex-direction: column;
  .el-checkbox {
    margin-bottom: 10px;
  }
}
</style>
